<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/comment.css"/><!--评论-->
    <link rel="stylesheet" href="../../css/share.css"/><!--分享-->
    <link rel="stylesheet" href="../../css/info-list.css"/><!--分享-->
    <title>话题PK</title>
    <style>
        .topic-pk-title {
            color: #222222;
            padding: 0.24rem 0.4rem;
            font-weight: bold;
        }

        .topic-pk-top {
            background-color: #FFFFFF;
        }

        .topic-pk-content {
            padding: 0 0.32rem;
            line-height: 0.48rem;
            color: rgba(34, 34, 34, 0.64);
        }

        .topic-pk-number {
            /*目前先把分享按钮隐藏,因此不用那么大的padding*/
            /*padding: 0.28rem 0.32rem 0.72rem 0.32rem;*/
            padding: 0.28rem 0.32rem 0rem 0.32rem;
        }

        .topic-pk-in {
            color: rgba(34, 34, 34, 0.45);
            margin: 0.32rem;
        }

        .topic-people-botton {
            color: rgba(34, 34, 34, 0.45);
        }
        .topic-pk-count {
            margin-left: 0.08rem;
        }

        .topic-pk-invi {
            margin-top: 0.96rem;
        }

        .topic-pk-fri {
            color: rgba(34, 34, 34, 0.6);
            margin-right: 0.24rem;
        }

        .topic-pk-right {
            margin-right: 0.36rem;
        }

        .topic-pk-center {
            background-color: #FFFFFF;
            margin-top: 0.16rem;
        }

        .topic-pk-view {
            padding: 0.48rem 0.32rem 0 0.32rem;
        }


        .topic-pk-squ {
            background-color: rgba(251, 101, 58, 0.1);
            color: #FB653A;
            border-radius: 0.28rem 0 0 0;
            width: 3.28rem;
            line-height: 0.78rem;
            text-align: center;
            height: 0.78rem;
        }

        .topic-pk-con {
            background-color: rgba(78, 126, 244, 0.1);
            color: #4E7EF4;
            border-radius: 0 0.28rem 0 0;
            width: 3.28rem;
            line-height: 0.78rem;
            text-align: center;
            height: 0.78rem;
        }

        .topic-pk-item {
            margin-bottom: 0.24rem;
            width: 3.28rem;
            padding: 0.24rem;

        }

        .topic-pk-iteml {
            background-color: rgba(251, 101, 58, 0.02);
        }

        .topic-pk-itemr {
            background-color: rgba(78, 126, 244, 0.02);
        }

        .topic-pk-head {
            height: 0.44rem;
            width: 0.44rem;
            border-radius: 50rem;
        }

        .topic-pk-name {
            color: #222222;
        }

        .topic-pk-main {
            line-height: 0.4rem;
            color: rgba(34, 34, 34, 0.8);
            word-break: break-all;
        }

        .topic-pk-nlikes {
            margin-left: 0.04rem;
            color: #222222;
        }

        .topic-pk-hot {
            background-color: #FFFFFF;
            padding-top: 0.64rem;
            padding-bottom: 0.76rem;
        }

        .topic-pk-hotht {
            padding-left: 0.32rem;
        }

        .topic-pk-pd {
            padding-right: 0.16rem;
        }

        .topic-pk-pic {
            width: 5.72rem;
            height: 2.78rem;
            background-color: #EDF5FD;
            margin-left: 0.32rem;
            padding: 0.36rem 0.28rem 0.32rem 0.28rem;
        }


        .topic-pk-bottom {
            padding: 0.26rem 0.32rem;
            background-color: white;
            margin: 0.16rem 0;
        }

        .topic-pk-hticon {
            height: 0.38rem;
            width: 0.38rem;
        }

        .topic-pk-cy {
            margin-left: 0.24rem;
        }

        .topic-pk-gc {
            color: #4E7EF4;
        }

        .topic-pk-fh {
            color: rgba(153, 153, 153, 0.6);
        }
        .topic-view-positive {
            left: .28rem;
            top: .24rem;
            width: 1.92rem;
            text-align: center;
            color: #ffffff;
            line-height: .4rem;
        }
        .topic-view-positivetop {
            font-size: 0.28rem;
            left: .8rem;
            top: .4rem;
            width: 1.92rem;
            text-align: center;
            color: #ffffff;
            line-height: .4rem;
        }
        .topic-view-side {
            right: .28rem;
            top: .34rem;
            width: 1.92rem;
            text-align: center;
            color: #ffffff;
            line-height: .4rem;
        }
        .topic-view-sidetop {
            font-size: 0.28rem;
            right: .8rem;
            top: .5rem;
            width: 1.92rem;
            text-align: center;
            color: #ffffff;
            line-height: .4rem;
        }
        .topic-pk-choice{
            width: 8.82rem;
            height: 1.14rem;
            padding-left: 0.32rem;
            padding-right: 0.32rem;

        }
        .topic-pk-choice img {
            width: 8.82rem;
            height: 1.18rem;
        }

        .topic-pk-choice1{
            width: 4.82rem;
            height: 1.14rem;
            padding-left: 0rem;
        }
        .topic-pk-choice1 img {
            width: 4.82rem;
            height: 1.18rem;
        }

        .topic-pk-choice2{
            width: 6.82rem;
            height: 1.14rem;
            padding-left: 0rem;
        }
        .topic-pk-choice2 img {
            width: 6.82rem;
            height: 1.48rem;
        }


    /* 已站队*/
        .topic-pk-vote {
            margin-top: .28rem;
            line-height: .36rem;
        }
        .topic-vote-positive {
            color: #FB653A;
        }
        .topic-vote-side {
            color: rgba(78, 126, 244, 0.5);
        }
        .topic-pk-pre {
            margin-top: .08rem;
        }
        .topic-pre-positive {
            color: #FB653A;
        }
        .topic-list-line {
              max-width: 5.4rem;
              margin: 0 .12rem;
        }
        /*控制横线*/
        .topic-line-positive {
            background: #fb653a;
            box-shadow: 0px 2px 8px 0px rgba(251, 101, 58, 0.3);
            border-radius: 100px 0px 0px 100px;
            position: relative;
            height: .20rem;
        }
        .topic-line-positiveall {
            background: #fb653a;
            box-shadow: 0px 2px 8px 0px rgba(251, 101, 58, 0.3);
            border-radius: 100px 100px 100px 100px;
            position: relative;
            height: .16rem;
        }
        .topic-line-side {
            background: rgba(78, 126, 244, 0.5);
            border-radius: 0px 100px 100px 0px;
            position: relative;
            height: .20rem;
        }
        .topic-line-sideall {
            background: rgba(78, 126, 244, 0.5);
            border-radius: 100px 100px 100px 100px;
            position: relative;
            height: .16rem;
        }
        .topic-pre-side {
            color: rgba(78, 126, 244, 0.5);
        }
        .topic-people-magin{
            margin-top: 0.2rem;
        }
        /* 已站队*/
        .pk-top-count{
            font-size: 0.44rem;
        }
        .pk-urge-op {
            font-size: 0.24rem;
            color: rgba(34, 34, 34, 0.4);
            padding-top: 0.28rem;
            text-align: center;
        }
        .pk-urge-squ{
            font-size: 0.24rem;
            color: rgba(34, 34, 34, 0.4);
            padding-top: 0.28rem;
            text-align: center;
        }
        .pk-comment-cancel{
            font-size: 0.32rem;
            color: rgba(34, 34, 34, 0.45);
            width: 100%;
            text-align: left;
        }
        .pk-comment-send{
            padding-right: 0rem;
            font-size: 0.32rem;
            color: #FF9523;
            width: 100%;
            text-align: right
        }
        .topic-pk-textarea{
            border: none;
            border: solid 0rem;
            outline: none;
        }
        .topic-pk-thumbsup{
            color: #FF9523;
        }
        .icon-pk-left{
            margin-right: 0.16rem;
        }
    </style>
</head>
<body>

<div class="flex-column ff400 h-100-p">
    <!--顶部状态栏-->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">话题PK</div>
            <div class="right-bar">
<!--                <span class="iconfont iconfenxiang1 fs16" onclick="dealShare()"></span>-->
            </div>
        </div>
    </div>

    <div class="flex-1 scoll-y scoll-area" id="centerArea">
        <!--话题,描述,分享 -->
        <div class="topic-pk-top">
            <!--话题-->
            <div class="topic-pk-title ff700 fs22"></div>
            <!--话题描述-->
            <div class="topic-pk-content">
            </div>
            <!--参与人-->
            <div class="topic-pk-in flex-row align-items-center">
                <span class="iconfont iconrenqun fs12"></span>
                <span class="topic-pk-count fs13"></span>
            </div>
            <!--当前PK状态(对于用户)-->
            <div class="flex-row align-items-center justify-content-center">
                <div class="pos-r  " id="currChoice">
                </div>
            </div>
            <!--分享按钮-->
            <div class="topic-pk-number flex-column">

                <div class="topic-pk-invi flex-row align-items-center">
<!--                    <div class="topic-pk-fri fs13">邀请好友站队</div>-->
<!--                    <div class="flex-row fs26 align-items-center">-->
<!--                        <svg class="topic-pk-right icon" aria-hidden="true" onclick="shareClick(1)" >-->
<!--                            <use xlink:href="#iconpengyouquan"/>-->
<!--                        </svg>-->

<!--                        <svg class="topic-pk-right icon" aria-hidden="true" onclick="shareClick(0)">-->
<!--                            <use xlink:href="#iconweixin"/>-->
<!--                        </svg>-->

<!--                        <svg class="topic-pk-right icon" aria-hidden="true">-->
<!--                            <use xlink:href="#iconweibo"/>-->
<!--                        </svg>-->
<!--                    </div>-->
                </div>
            </div>
        </div>

        <!--正反方观点-->
        <div class="topic-pk-center flex-column">
            <div class="topic-pk-view flex-row justify-content-between">
                <div class="flex-column">
                    <div class="topic-pk-squ fs15 ff500">
                        正方观点
                    </div>
                    <!--自己的观点-->
                    <!-- 观点部分 -->
                    <div class="topic-pk-commentl">
                        <div class="pk-urge-op" > - 来, 你来 - </div>

                    </div>
                </div>
                <div class="flex-column">
                    <div class="topic-pk-con fs15 ff500">
                        反方观点
                    </div>
                    <!--自己的观点-->
                    <!-- 观点部分 -->
                    <div class="topic-pk-commentr">
                        <div class="pk-urge-squ ff400"> - 还是你先来 - </div>
                    </div>
                </div>

            </div>
            <div id="seeMore" class="flex-row align-items-center justify-content-center" style="color: rgba(34,34,34,0.7);display: none">
                <div style="margin-right: 0.12rem;" onclick="getCommontList(currInfo.topicId)">查看更多</div>
                <span class="iconfont iconxiangxia-01"></span>
            </div>

        </div>

        <!--热门话题-->
        <div class="topic-pk-hot">
            <div class="topic-pk-hotht ff500">热门话题</div>
            <div class="flex-row mt20 scoll-x">
                <div class="flex-row topic-pk-pd">


                </div>
            </div>
        </div>

        <!--去话题广场参与更多pk-->
        <div class="topic-pk-bottom flex-row align-items-center justify-content-between" onclick="goPKList()">
            <div class="flex-row">
                <svg class="topic-pk-hticon icon" aria-hidden="true">
                    <use xlink:href="#iconhuati"/>
                </svg>
                <span class="topic-pk-cy">去话题广场参与</span>
                <span class="topic-pk-gc">更多PK</span>
            </div>
            <span class="topic-pk-fh iconfont iconfanhui fs9"></span>
        </div>

        <!--遮罩-->
        <div class="comment-show comment-window" onclick="hiddenInput()" style="display: none;"></div>
    </div>


    <!--评论输入框-->
    <div class="flex-column comment-window-out comment-show" style="display: none;">
        <!--取消,发送按钮-->
        <div class="flex-row justify-content-between bg-white window-head">
            <div class="pk-comment-cancel align-items-center" onclick="cancelButton()" >取消</div>
            <div class="pk-comment-send " onclick="setMyComment()" >发送</div>
        </div>
        <!--输入框-->
        <div class="window-content">
        <textarea class="topic-pk-textarea"></textarea>
        </div>
    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script>
    //当前页情况
    let page = {
      pageNumber: 1,
      pageSize:3,
      currLeftCun:0,
      rurrRrghtCun:0
    }
    //当前话题详情
    let currInfo = {
      participation:'0',
      team: '1'
    }

    //用户状态
    let isLogin = false

    async function initPage(params) {
      //状态栏自适应
      Utils.sbhAdaptive()
      $('.comment-show').hide()
      //用户是否是已登录判断
      judgeLogin()
      //获取pk详情信息,渲染对于该用户当前pk情况,如果参与了显示对比,未参与显示投票
      getPkDetail(params.topicId)
      //获取评论列表
      getCommontList(params.topicId)
      //获取热门推荐PK
      getRecommentList()

    }
    function judgeLogin() {
      const user = window.user
      if (user.isGuest){
        isLogin = false
      }else {
        isLogin = true
      }

    }
    function reLoadPage() {
      //状态栏自适应
      Utils.sbhAdaptive()
      $('.comment-show').hide()
      //用户是否是已登录判断
      judgeLogin()
      //获取pk详情信息,渲染对于该用户当前pk情况,如果参与了显示对比,未参与显示投票
      getPkDetail(params.topicId)
      //获取评论列表
      getCommontList(params.topicId)
      //获取热门推荐PK
      getRecommentList()    }

    function startPage(params) {
    }

    //获取pk详情信息
    function getPkDetail(topicId) {
      Server.topicPK.getPKDetail({
        topicId: topicId,
      }).then(function (data) {
        //话题赋值
        $('.topic-pk-title').html(data.list.title)
        //加载话题描述
        $('.topic-pk-content').html(data.list.topicIntroduce)
        //参与人数加载
        $('.topic-pk-count').html(data.list.participantsCnt + '人已参与')
        //站队情况赋值
        currInfo = data.list
        //渲染对于该用户当前pk情况,如果参与了显示对比,未参与显示投票
        setCurrStatus()
        //如果话题还没结束又站队了,设置我的观点setMyOpintion
        if (data.list.endDttm > DateUtils.getNowInt() && currInfo.participation === '1' && isLogin){
          setMyOpintion()
        }
      })
    }
    function goPKList() {
      jsBridge.openWindow('html/home/topicpk-list.html',{},{noBar:false})
    }

    //获取评论列表
    function getCommontList(topicId) {
      Server.topicPK.getCommontList({
        topicId: topicId,
        pageNum: page.pageNumber,
        pageSize:page.pageSize
      }).then(function (data) {
        //如果两方评论数均为0
        if (data.list.consideCntList.list.length === 0 && data.list.squareCntList.list.length === 0){
          //隐藏更多评论提示
          $('#seeMore').hide()

        }else{
          //如果正方评论数不等于0
          if (data.list.consideCntList.list.length !== 0)
          {
            //加载正方评论
            let consideHtmlStr = ''
            data.list.consideCntList.list.forEach(item => {
              consideHtmlStr += `<div class="topic-pk-item topic-pk-iteml flex-column">
                                    <div class="flex-row align-items-center">
                                        <img class="topic-pk-head" src="${item.headUrl ? item.headUrl : '../../images/user/user-head.png'}"/>
                                        <div class="topic-pk-name fs12 ml5 line1">${item.userName ? item.userName : '游客'}</div>
                                    </div>
                                    <div class="topic-pk-main mt10">${item.ideaContent}</div>
                                    <div class="flex-row justify-content-end align-items-center">
                                        <div onclick="thumbsUp(this,'${item.commentId}','${item.thumbsupCnt}')"  islike="${item.isLike === '1' ? item.isLike : '0'}">
                                        <span class="iconfont icondianzan fs12  ${item.isLike === '1' ? 'topic-pk-thumbsup' : ''}" ></span>
                                        <span class="topic-pk-nlikes  ${item.isLike === '1' ? 'topic-pk-thumbsup' : ''}">${item.thumbsupCnt}</span>
                                        </div>
                                    </div>
                                </div>`
              page.currLeftCun++
            })
            if (page.pageNumber === 1){
              $('.topic-pk-commentl').html(consideHtmlStr)
            }else {
              $('.topic-pk-commentl').append(consideHtmlStr)
            }
          }else {
            //如果正方评论数等于0
            if (page.currLeftCun === 0) {
              $('.pk-urge-op').html('正方还在思考')
            }
          }


          if (data.list.squareCntList.list.length !== 0){
            //加载反方评论
            //如果反方评论数不等于0
            let squareHtmlStr = ''
            data.list.squareCntList.list.forEach(item => {
              squareHtmlStr += `<div class="topic-pk-item topic-pk-iteml flex-column">
                                            <div class="flex-row align-items-center">
                                                <img class="topic-pk-head" src="${item.headUrl ? item.headUrl : '../../images/user/user-head.png'}"/>
                                                <div class="topic-pk-name fs12 ml5 line1">${item.userName ? item.userName : '无名氏'}</div>
                                            </div>
                                            <div class="topic-pk-main mt10">${item.ideaContent}</div>
                                            <div class="flex-row justify-content-end align-items-center">
                                                <div onclick="thumbsUp(this,'${item.commentId}','${item.thumbsupCnt}')"  islike="${item.isLike === '1' ? item.isLike : '0'}">
                                                <span class="iconfont icondianzan fs12  ${item.isLike === '1' ? 'topic-pk-thumbsup' : ''}"></span>
                                                <span class="topic-pk-nlikes  ${item.isLike === '1' ? 'topic-pk-thumbsup' : ''}">${item.thumbsupCnt}</span>
                                                </div>
                                            </div>
                                        </div>`
              page.rurrRrghtCun++
            })
            if (page.pageNumber === 1){
              $('.topic-pk-commentr').html(squareHtmlStr)
            }else{
              $('.topic-pk-commentr').append(squareHtmlStr)
            }

          }else {
            //如果反方评论数等于0
            if (page.rurrRrghtCun === 0) {
              $('.pk-urge-squ').html('反方还在思考')
            }
          }
          //如果正方或者反方还有评论未加载就显示加载更多
          if (data.list.squareCntList.hasNextPage || data.list.consideCntList.hasNextPage){
            $('#seeMore').show()
          }
          page.pageNumber++
        }
      })
    }


    //点赞动作
    function thumbsUp(item,commentId,thumbsupCnt) {
      //如果未登录
      if (!isLogin){
        //跳转登录
        Utils.goLogin()
        return
      }
      let isLike = $(item).attr('isLike')
      if(isLike === '1'){
        //如果是取消点赞
        $(item).find('.icondianzan').removeClass('topic-pk-thumbsup')
        $(item).find('.topic-pk-nlikes').removeClass('topic-pk-thumbsup')
        let cnt = parseInt($(item).find('.topic-pk-nlikes').text()) - 1
        $(item).find('.topic-pk-nlikes').text(cnt)
        isLike = '0'
        //取消点赞
        thumbsUpReq(commentId,isLike)
      }else {
        //如果是点赞
        $(item).find('.icondianzan').addClass('topic-pk-thumbsup')
        $(item).find('.topic-pk-nlikes').addClass('topic-pk-thumbsup')
        let cnt = parseInt($(item).find('.topic-pk-nlikes').text()) + 1
        $(item).find('.topic-pk-nlikes').text(cnt)
        isLike = '1'
        //点赞
        thumbsUpReq(commentId,isLike)
      }
      $(item).attr('isLike',isLike)
    }

    //点赞请求
    function thumbsUpReq(commentId,status) {
      Server.topicPK.thumbsUp({
        thumbup_object_id:commentId,
        status:status
      }).then(item => {

      })
    }

    //渲染对于该用户当前pk情况,如果参与了显示对比,未参与显示投票
    function setCurrStatus(){
      let  htmlStr
      //如果未站队,且未结束
      if (currInfo.participation === '0' && currInfo.endDttm > DateUtils.getNowInt() || !isLogin && currInfo.endDttm > DateUtils.getNowInt()){
        $('#currChoice').addClass('topic-pk-choice2')
        htmlStr = `<div class="topic-pk-choice2">
                        <img src="../../images/home/pkbz@3x.png">
                        <div class="pos-a topic-view-positivetop" onclick="setMyTerm('${currInfo.topicId}','1')">${currInfo.consideIdea}</div>
                        <div class="pos-a topic-view-sidetop" onclick="setMyTerm('${currInfo.topicId}','2')">${currInfo.squareIdea}</div>
                     </div>
                        `
      }else {
        $('#currChoice').addClass('topic-pk-choice')
        htmlStr = ` <div class="topic-vote-area">
                        <div class="flex-row justify-content-between topic-pk-vote">`
        //如果站正方
        if (currInfo.team === '1'){
          htmlStr += `
                            <div class="flex-row topic-vote-positive ff500 fs13">
                                <span class="iconfont icontijiao-01 fs16 icon-pk-left"></span>
                                <div>已投「${currInfo.consideIdea}」</div>
                            </div>
                            <div class="flex-row topic-vote-side ff500 fs13 ">
                                <div>${currInfo.squareIdea}</div>
                            </div>
                        </div>`

        }else if (currInfo.team === '2'){
          //如果站反方
          htmlStr += `      <div class="flex-row topic-vote-positive ff500 fs13">
                                <div>${currInfo.consideIdea}</div>
                            </div>
                            <div class="flex-row topic-vote-side ff500 fs13">
                                <div>已投「${currInfo.squareIdea}」</div>
                                <span class="iconfont icontijiao-01 fs16"></span>
                            </div>
                        </div>`
        }else {
          htmlStr += `
                <div class="flex-row topic-vote-positive ff500 fs13">
                  <div>${currInfo.consideIdea}</div>
                    </div>
                  <div class="flex-row topic-vote-side ff500 fs13">
                      <div>${currInfo.squareIdea}</div>
                  </div>
            </div>`
        }
        //渲染比例条
        //如果无人投票
        if (currInfo.participantsCnt === 0){
          htmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">50%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: 50%"></div>
                                <div class="topic-line-side" style="width: 50%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">50</a> %</div>
                        </div>`
        }else if(currInfo.participantsCnt > 0 && currInfo.squareCnt === 0){
          //如果只有正方有人投票
          htmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">100%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positiveall" style="width: 100%"></div>
                                <div class="topic-line-side" style="width: 0%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">0</a> %</div>
                        </div>`
        }else if (currInfo.participantsCnt > 0 && currInfo.squareCnt === currInfo.participantsCnt){
          //如果只有反方有人投票
          htmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">0%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: 0%"></div>
                                <div class="topic-line-sideall" style="width: 100%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">100</a> %</div>
                        </div>`
        }else {
          htmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">${(100 - ((currInfo.squareCnt / currInfo.participantsCnt) * 100).toFixed(0))}</a>%</div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: ${(100 - (( currInfo.squareCnt / currInfo.participantsCnt) * 100).toFixed(0)) + '%'}"></div>
                                <div class="topic-line-side" style="width: ${((currInfo.squareCnt / currInfo.participantsCnt) * 100).toFixed(0) + '%'}"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">${((currInfo.squareCnt / currInfo.participantsCnt) * 100).toFixed(0)}</a> %</div>
                        </div>
                      `
        }
        //渲染比例

      }

      $('#currChoice').html(htmlStr)


      // //如果已经站队了那么就渲染正反观点数比例条,站队结束提示
      // if (currInfo.endDttm < DateUtils.getNowInt() || currInfo.participation.toString === '1'){
      //   if (currInfo.participantsCnt === currInfo.squareCnt){
      //     //如果全部站反方
      //     $('.topic-line-side').css( 'width', 100 + '%')
      //   }else if (currInfo.squareCnt === '0'){
      //     //如果全部站正方
      //     $('.topic-line-positive').css( 'width', 100 + '%')
      //   }
      // }
      //如果话题已经结束
      if (currInfo.endDttm < DateUtils.getNowInt()){
        $('.topic-pk-in').append('<span class="topic-pk-count fs13"  id="topicCurrStatus">  话题已结束</span>\n')
      }else if (currInfo.endDttm > DateUtils.getNowInt() && currInfo.participation.toString === '1'){
        //如果投票还没结束,但是已经站队了
        $('.topic-pk-in').append('<span class="topic-pk-count fs13"  id="topicCurrStatus">  站队已结束</span>\n')
      }else if (currInfo.endDttm > DateUtils.getNowInt() && currInfo.participation.toString === '0'){
        //如果投票还没结束,且还没站队
        $('.topic-pk-in').append('<span class="topic-pk-count fs13"  id="topicCurrStatus">  请投票</span>\n')
      }
    }


    //设置我的观点
    function setMyOpintion() {
      let  htmlStr = ''
      htmlStr = `<div class="flex-column justify-content-center align-items-center"
                         style="margin-bottom:0.24rem;border:1px dashed #D6D6D6;box-sizing: border-box; width:3.28rem;height:1.88rem;background-color: #FCFCFC" onclick="getCommentAre()">
                        <div>
                            <svg class="icon" aria-hidden="true" style="height: 0.44rem;width:0.44rem;">
                                <use xlink:href="#iconzengjia"/>
                            </svg>
                        </div>
                        <div class="mt10">
                            <span class="fs13" style="color: #222222;" >说说你的理由</span>
                        </div>
                    </div>`
      //如果站队且站正方
      if (currInfo.team === '1'){
        $('.topic-pk-squ').after(htmlStr)
      }else if (currInfo.team === '2'){
        //如果站队且站反方
        $('.topic-pk-con').after(htmlStr)
      }else {
        //如果未站队
        return
      }

    }

    //调起评论框
    function getCommentAre() {
      //如果未登录
      if (!isLogin){
        //跳转登录
        Utils.goLogin()
        return
      }
      //设置遮罩框
      $('.comment-show').css('display','block')
      //聚焦textarea输入框
      $('.topic-pk-textarea').focus()
}

    //展示输入框
    function hiddenInput() {
      //隐藏遮罩框
      $('.comment-show').hide()
      //清空输入框
      $('.topic-pk-textarea').val('')
      //弹出内容不能为空
      //jsBridge.callBridge('toast', {msg: '评论不能为空'})
}

    //取消输入框
    function cancelButton() {
      //隐藏遮罩框,输入框
      $('.comment-show').hide()
      //清空输入框的值
      $('.topic-pk-textarea').val('')
}
    //进行评论
    function setMyComment() {
      //如果未登录
      if (!isLogin){
        //跳转登录
        Utils.goLogin()
        return
      }
      //获取输入框的值
      let area = $('.topic-pk-textarea').val()
      let reduceArea = area.replace(/\+/g, '').replace(/[ ]/g, '').replace(/[\r\n]/g, '')

      if (reduceArea.length < 1){
        //弹出内容不能为空
        jsBridge.callBridge('toast', {msg: '评论不能为空'})
      }else if (Utils.emojiJudge(area)){
        jsBridge.callBridge('toast', {msg: '请勿输入表情'})
      }else if (area.length > 300){
        jsBridge.callBridge('toast', {msg: '输入内容过长'})
      }else {
        // 发送评论
        Server.topicPK.setMyComment({
          team:currInfo.team,
          ideaContent:area,
          topicId:currInfo.topicId
        }).then(item => {
          //关闭输入框
          cancelButton()
          //刷新评论区
          page.pageNumber = 1
          getCommontList(currInfo.topicId)
        })
      }
    }

    //查询热门推荐
    function getRecommentList() {
      Server.topicPK.getRecommentList({
        isRecommend: '1'
      }).then(function (data) {
        let recommentHtmlStr = ''
        data.list.forEach(item => {
          recommentHtmlStr += `
                                        <div class="topic-pk-pic flex-column" onclick="goTopicPkDetail('${item.topicId}')">
                                                <div> <div class="line1">${item.title}</div></div>
                                                <div class="topic-people-botton flex-row align-items-center topic-people-magin">
                                                    <span class="iconfont iconrenqun fs12"></span>
                                                    <span class="topic-pk-count fs13">${item.participantsCnt}人已投票</span>
                                                </div>`
          //如果未站队,且未结束  或者 是未登录状态
          if (item.participation === '0' && item.endDttm > DateUtils.getNowInt() || !isLogin && item.endDttm > DateUtils.getNowInt() ){
            recommentHtmlStr += `
                                                <div class="topic-pk-choice1 pos-r" style="margin-top: 0.32rem">
                                                    <img src="../../images/home/pkbz@3x.png">
                                                    <div class="pos-a topic-view-positive" style="font-size: 0.32rem">${item.consideIdea}</div>
                                                    <div class="pos-a topic-view-side"  style="font-size: 0.32rem">${item.squareIdea}</div>
                                                </div>
                                        </div>
                        `
          }else {
            recommentHtmlStr += `
                                                <div class="topic-vote-area">
                                                    <div class="flex-row justify-content-between topic-pk-vote">`
            //如果站正方
            if (item.team === '1'){
              recommentHtmlStr += `
                                                <div class="flex-row topic-vote-positive ff500 fs13">
                                                    <span class="iconfont icontijiao-01 fs16 icon-pk-left"></span>
                                                    <div>已投「${item.consideIdea}」</div>
                                                </div>
                                                <div class="flex-row topic-vote-side ff500 fs13">
                                                </div>
                                            </div>`

            }else if (item.team === '2'){
              //如果站反方
              recommentHtmlStr += `
                                                <div class="flex-row topic-vote-positive ff500 fs13">

                                                </div>
                                                <div class="flex-row topic-vote-side ff500 fs13">
                                                    <span class="iconfont icontijiao-01 fs16"></span>
                                                    <div>已投「${item.squareIdea}」</div>
                                                </div>
                                            </div>`
            }
            //渲染比例

            recommentHtmlStr += `
                                            </div>`

            //如果无人投票
            if (item.participantsCnt === 0){
              recommentHtmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">50%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: 50%"></div>
                                <div class="topic-line-side" style="width: 50%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">50</a> %</div>
                        </div>`
            }else if(item.participantsCnt > 0 && item.squareCnt === 0){
              //如果只有正方有人投票
              recommentHtmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">100%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positiveall" style="width: 100%"></div>
                                <div class="topic-line-side" style="width: 0%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">0</a> %</div>
                        </div>`
            }else if (item.participantsCnt > 0 && item.squareCnt === item.participantsCnt){
              //如果只有反方有人投票
              recommentHtmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">0%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: 0%"></div>
                                <div class="topic-line-sideall" style="width: 100%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">100</a> %</div>
                        </div>`
            }else {
              recommentHtmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">${(100 - (( item.squareCnt / item.participantsCnt) * 100).toFixed(0))}</a>%</div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: ${(100 - (( item.squareCnt / item.participantsCnt) * 100).toFixed(0) ) + '%'}"></div>
                                <div class="topic-line-side" style="width: ${((item.squareCnt / item.participantsCnt) * 100).toFixed(0) + '%'}"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">${((item.squareCnt / item.participantsCnt) * 100).toFixed(0)}</a> %</div>
                        </div>
                      `
            }

            recommentHtmlStr += ` </div></div>`
          }

        })

        $('.topic-pk-pd').html(recommentHtmlStr)
      })
    }


    //设置我的站队
    function setMyTerm(topicId,team) {
      //如果未登录
      if (!isLogin){
        //跳转登录
        Utils.goLogin()
        return
      }

      Server.topicPK.setMyOptions({
        topicId: topicId,
        team:team,
        channel:'1'
      }).then(function (data) {
        $('#currChoice').empty()
        $('#currChoice').removeClass('topic-pk-choice1')
        $('#currChoice').addClass('topic-pk-choice')
        getPkDetail(currInfo.topicId)
        getRecommentList()
      })
    }


    //跳转到热门推荐话题上
    function goTopicPkDetail(topicId) {
      jsBridge.openWindow('html/home/topic-pk.html',{topicId:topicId},{noBar:false})
    }

    // TODO 这里的分享链接是错误的,暂时我还不知道如何配置,后面又需要再问
    // 弹窗分享
    function dealShare() {
      let item = {
        title: currInfo.title,
        content: currInfo.topicIntroduce,
        url: `${BASE_SERVER}/jtzx/app/topic-pk.html?topicId=${currInfo.topicId}`,
        image: '../../images/home/pkbz@3x.png',
        type: 'url'
      }
      Template.shareWindow(item)
    }

    // TODO 这里的分享链接是错误的,暂时我还不知道如何配置,后面又需要再问
    //页面内分享
    function shareClick(scene) {
      let item = {
        title: currInfo.title,
        content: currInfo.topicIntroduce,
        url: `${BASE_SERVER}/jtzx/app/topic-pk.html?topicId=${currInfo.topicId}`,
        image:'../../images/home/pkbz@3x.png',
        type: 'url',
        scene: scene
      }
      Utils.goShare(item)
    }

</script>
</html>
